<template>
  <el-dialog
    :title="state.title"
    v-model="state.visible"
    @close="closeForm"
  >
    <el-form class="good-form"
      :model="state.info"
      :rules="state.rules"
      ref="refForm"
      label-width="140px">
      <el-form-item label="图标" prop="icon">
        <el-upload class="upload-demo" ref="refUpload"
          accept="jpg,jpeg,png"
          :action="uploadServer"
          :headers="{ Authorization: local.get('ADMIN.TOKEN') || '' }"
          :on-success="(response, file) => uploadSuccess(response, file, index)"
          :on-error="uploadError"
          :show-file-list="false">
          <img v-if="state.info.icon" :src="state.info.icon"
            class="avatar"
            width="120"
            height="120"
            style="border: 1px solid #e9e9e9;"
            :alt="state.info.icon">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="名称" prop="title">
        <el-input type="text" v-model="state.info.title"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="orderby">
        <el-input type="number" v-model="state.info.orderby" min="0"/>
      </el-form-item>
      <el-form-item label="隐藏" prop="hide">
        <el-radio-group v-model="state.info.hide" class="ml-4">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="2">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons'
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { AdminWxaMenuInfo, AdminWxaMenuPost, AdminWxaMenuPut } from '../api/server/config'
import { uploadServer } from "../utils";
import { local } from "../utils/storage";

const refForm = ref(null)
const props = defineProps({
  reload: Function
})
const state = reactive({
  visible: false,
  title: '添加',
  info: {
    title: '',
    icon: '',
    url: '',
    orderby: 0,
    hide: 1
  },
  rules: {
    title: [
      { required: 'true', message: '名称不能为空', trigger: ['change'] }
    ],
    icon: [
      { required: 'true', message: '图标不能为空', trigger: ['change'] }
    ],
    url: [
      { required: 'true', message: '地址不能为空', trigger: ['change'] }
    ]
  }
})

// 开启弹窗
const open = (id) => {
  state.visible = true
  if (id) {
    state.title = '修改'
    getInfo(id)
  } else {
    state.title = '添加'
  }
}

const getInfo = async (id) => {
  const { data } = await AdminWxaMenuInfo(id)
  state.info = data
}

const submit = () => {
  refForm.value.validate(async (valid) => {
    if (valid) {
      if (state.info.id) {
        await AdminWxaMenuPut(state.info.id, state.info)
      } else {
        await AdminWxaMenuPost(state.info)
      }
      ElMessage.success('操作成功')
      state.visible = false
      if (props.reload) props.reload()
    }
  })
}


const closeForm = () => {
  refForm.value.resetFields()
}


// 文件上传成功回调
const uploadSuccess = (response, file, index) => {
  if (response.code === 200) {
    state.info.icon = response.data
  } else {
    ElMessage.error('Upload failed: ' + response.msg)
  }
}
// 文件上传失败回调
const uploadError = (e, file) => {
  ElMessage.error('Upload failed: ' + e.msg)
}

defineExpose({ open })

</script>

<style scoped>
:deep(.el-dialog .el-dialog__body) {
  width: 85%;
}

:deep(.upload-demo .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}


:deep(.el-icon.avatar-uploader-icon ) {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  text-align: center;
}
</style>
